Day18: JFrame教學

2022 iThome 鐵人賽

DAY 18

Software Development

大學耍廢的我要學Java翻身系列第 18 篇

14th鐵人賽

jhps9501

2022-10-02 23:57:47

3818 瀏覽

分享至

視窗基本建置

基本功能介紹

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)=> 設定按下視窗的x會關閉視窗

setBounds(x,y,width,height) => 設定視窗位置和寬度高度

setTitle() => 設定視窗標題

setVisible() => 設定是否顯示視窗

import javax.swing.*;   // 載入swing套件
class MyJFrame extends JFrame {  // 定義我們的JFrame類別繼承JFrame
    MyJFrame(){
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 設定我們的視窗在螢幕上的(740, 350)位置出現，寬450高300
        setBounds(740, 350, 450, 300);
        setTitle("我們的JFrame");
        setVisible(true);
    }
}
public class Main extends JPanel{
    public static void main(String[] args) {
        MyJFrame window = new MyJFrame();
    }
}

版面配置

setLayout(LayoutManager mgr) // 使用版面配置管理

版面配置大約分為幾種

絕對座標
邊緣式
流程式
格線式

絕對座標 => 就是剛剛的setBounds()

import javax.swing.*;   // 載入swing套件
class MyJFrame extends JFrame {  // 定義我們的JFrame類別繼承JFrame
    private JPanel contentPane;
    MyJFrame(){
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 設定我們的視窗在螢幕上的(740, 350)位置出現，寬450高300
        setBounds(740, 350, 450, 300);
        contentPane = new JPanel();
        setContentPane(contentPane);  // 設定contentPane為容器
        contentPane.setLayout(null);  // 不使用版面配置

        JButton btn1 = new JButton("按鈕元件1");  // 建立按鈕元件
        btn1.setBounds(20, 20, 100, 30);
        contentPane.add(btn1);  // 新增到容器裡

        setTitle("我們的JFrame");
        setVisible(true);
    }
}
public class Main extends JPanel{
    public static void main(String[] args) {
        MyJFrame window = new MyJFrame();
    }
}

前面原本只有一個按鈕還很簡單，但是多了幾個按鈕後就要一個一個設定位置，程式碼會變得冗長複雜不好維護

import javax.swing.*;   // 載入swing套件
class MyJFrame extends JFrame {  // 定義我們的JFrame類別繼承JFrame
    private JPanel contentPane;
    MyJFrame(){
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 設定我們的視窗在螢幕上的(740, 350)位置出現，寬450高300
        setBounds(740, 350, 450, 300);
        contentPane = new JPanel();
        setContentPane(contentPane);
        contentPane.setLayout(null);

        JButton btn1 = new JButton("按鈕元件1");
        btn1.setBounds(20, 20, 100, 30);
        contentPane.add(btn1);

        JButton btn2 = new JButton("按鈕元件2");
        btn2.setBounds(300, 20, 100, 30);
        contentPane.add(btn2);

        JButton btn3 = new JButton("按鈕元件3");
        btn3.setBounds(20, 80, 100, 30);
        contentPane.add(btn3);

        JButton btn4 = new JButton("按鈕元件4");
        btn4.setBounds(300, 80, 100, 30);
        contentPane.add(btn4);

        setTitle("我們的JFrame");
        setVisible(true);
    }
}
public class Main extends JPanel{
    public static void main(String[] args) {
        MyJFrame window = new MyJFrame();
    }
}

邊緣式 => BorderLayout(int hgap, int vgap)

寫法: setLayout(new BorderLayout(hgap, vgap))
hgap => 控制水垂直間距；vgap => 控制水平間距
用add(Component comp, Object constraints)
=> comp: 加入的元件
=> constraints 元件配置的位置如下

BorderLayout.EAST => 東
BorderLayout.SOUTH => 南
BorderLayout.WEST => 西
BorderLayout.NORTH => 北
BorderLayout.CENTER => 中
下列程式碼用按鈕去顯示各方位的配置區塊

import javax.swing.*;   // 載入swing套件
import java.awt.*;

class MyJFrame extends JFrame {  // 定義我們的JFrame類別繼承JFrame
    private JPanel contentPane;
    MyJFrame(){
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 設定我們的視窗在螢幕上的(740, 350)位置出現，寬450高300
        setBounds(740, 350, 450, 300);
        contentPane = new JPanel();
        contentPane.setLayout(new BorderLayout(0, 0));
        setContentPane(contentPane);

        JButton btnN = new JButton("按鈕元件N");
        contentPane.add(btnN, BorderLayout.NORTH);

        JButton btnS = new JButton("按鈕元件S");
        contentPane.add(btnS, BorderLayout.SOUTH);

        JButton btnW = new JButton("按鈕元件W");
        contentPane.add(btnW, BorderLayout.WEST);

        JButton btnE = new JButton("按鈕元件E");
        contentPane.add(btnE, BorderLayout.EAST);

        JButton btnC = new JButton("按鈕元件C");
        contentPane.add(btnC, BorderLayout.CENTER);

        setTitle("我們的JFrame");
        setVisible(true);
    }
}
public class Main extends JPanel{
    public static void main(String[] args) {
        MyJFrame window = new MyJFrame();
    }
}

設定BorderLayout(50, 50) => 讓各元件產生50的間距

import javax.swing.*;   // 載入swing套件
import java.awt.*;

class MyJFrame extends JFrame {  // 定義我們的JFrame類別繼承JFrame
    private JPanel contentPane;
    MyJFrame(){
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 設定我們的視窗在螢幕上的(740, 350)位置出現，寬450高300
        setBounds(740, 350, 450, 300);
        contentPane = new JPanel();
        contentPane.setLayout(new BorderLayout(50, 50));
        setContentPane(contentPane);

        JButton btnN = new JButton("按鈕元件N");
        contentPane.add(btnN, BorderLayout.NORTH);

        JButton btnS = new JButton("按鈕元件S");
        contentPane.add(btnS, BorderLayout.SOUTH);

        JButton btnW = new JButton("按鈕元件W");
        contentPane.add(btnW, BorderLayout.WEST);

        JButton btnE = new JButton("按鈕元件E");
        contentPane.add(btnE, BorderLayout.EAST);

        JButton btnC = new JButton("按鈕元件C");
        contentPane.add(btnC, BorderLayout.CENTER);

        setTitle("我們的JFrame");
        setVisible(true);
    }
}
public class Main extends JPanel{
    public static void main(String[] args) {
        MyJFrame window = new MyJFrame();
    }
}

流程式 => 由左到右，由上到下(像是Word一樣)

FlowLayout(int align)
align配置如下

FlowLayout.Left => 左
FlowLayout.Center => 中
FlowLayout.Right => 右
寫法: setLayout(new FlowLayout(FlowLayout.Left, 20, 30)); // 後面的元件間距不需要可以不寫

import javax.swing.*;   // 載入swing套件
import java.awt.*;

class MyJFrame extends JFrame {  // 定義我們的JFrame類別繼承JFrame
    private JPanel contentPane;
    MyJFrame(){
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 設定我們的視窗在螢幕上的(740, 350)位置出現，寬450高300
        setBounds(740, 350, 450, 300);
        contentPane = new JPanel();
        contentPane.setLayout(new FlowLayout(FlowLayout.CENTER, 20, 20));
        setContentPane(contentPane);

        JButton btn1 = new JButton("按鈕元件1");
        contentPane.add(btn1);

        JButton btn2 = new JButton("按鈕元件2");
        contentPane.add(btn2);

        JButton btn3 = new JButton("按鈕元件3");
        contentPane.add(btn3);

        JButton btn4 = new JButton("按鈕元件4");
        contentPane.add(btn4);

        JButton btn5 = new JButton("按鈕元件5");
        contentPane.add(btn5);

        setTitle("我們的JFrame");
        setVisible(true);
    }
}
public class Main extends JPanel{
    public static void main(String[] args) {
        MyJFrame window = new MyJFrame();
    }
}

格線式 => 把視窗平均分配

GridLayout(int rows, int cols, int hgap, int vgap)
寫法: setLayout(new GridLayout(int rows, int cols, int hgap, int vgap))
rows => 設定水平列數 | cols => 設定垂直行數 | hgap, vgap若無需設定元件間距可不寫
如果參數都沒寫就會連著一列到底

import javax.swing.*;   // 載入swing套件
import java.awt.*;

class MyJFrame extends JFrame {  // 定義我們的JFrame類別繼承JFrame
    private JPanel contentPane;
    MyJFrame(){
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 設定我們的視窗在螢幕上的(740, 350)位置出現，寬450高300
        setBounds(740, 350, 450, 300);
        contentPane = new JPanel();
        contentPane.setLayout(new GridLayout(2, 4, 5, 5));
        setContentPane(contentPane);

        JButton btnN = new JButton("按鈕元件N");
        contentPane.add(btnN);

        JButton btnS = new JButton("按鈕元件S");
        contentPane.add(btnS);

        JButton btnW = new JButton("按鈕元件W");
        contentPane.add(btnW);

        JButton btnE = new JButton("按鈕元件E");
        contentPane.add(btnE);

        JButton btnC = new JButton("按鈕元件C");
        contentPane.add(btnC);

        JButton btn1 = new JButton("按鈕元件1");
        contentPane.add(btn1);

        JButton btn2 = new JButton("按鈕元件2");
        contentPane.add(btn2);

        JButton btn3 = new JButton("按鈕元件3");
        contentPane.add(btn3);

        setTitle("我們的JFrame");
        setVisible(true);
    }
}
public class Main extends JPanel{
    public static void main(String[] args) {
        MyJFrame window = new MyJFrame();
    }
}

事件處理 => 和user互動

分為事件來源、事件傾聽者、事件處理
addActionListener事件傾聽者物件

import javax.swing.*;   // 載入swing套件
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

class MyJFrame extends JFrame implements ActionListener{  // 定義我們的JFrame類別繼承JFrame
    private JPanel contentPane;
    MyJFrame(){
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 設定我們的視窗在螢幕上的(740, 350)位置出現，寬450高300
        setBounds(740, 350, 450, 300);
        contentPane = new JPanel();
        contentPane.setLayout(new GridLayout(2, 4, 5, 5));
        setContentPane(contentPane);

        JButton btn1 = new JButton("事件來源");
        contentPane.add(btn1);

        btn1.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                JOptionPane.showMessageDialog(null, "事件處理中");    // 產生訊息通知對話方塊
            }
        });

        JButton btn2 = new JButton("按鈕元件2");
        contentPane.add(btn2);
        btn2.addActionListener(this);

        JButton btn3 = new JButton("按鈕元件3");
        contentPane.add(btn3);

        setTitle("我們的JFrame");
        setVisible(true);
    }
    public void actionPerformed(ActionEvent e){
        JOptionPane.showMessageDialog(null, "處理事件中...");
    }
}
public class Main extends JPanel{
    public static void main(String[] args) {
        MyJFrame window = new MyJFrame();
    }
}